<template>
	<view class="content">
		<view class="test-box" v-show="display == 'list'">
			<view class="test-item" v-for="(staff,idx) in staff_list" :key="idx" @click="toEdit(staff)" :class="{'complete':staff.progress == 1}" v-text="staff.staffName"></view>
		</view>
		<view class="edit-box" v-show="display == 'edit'">
			<text class="edit-title" v-text="item.staffName"></text>
			<view class="item-box" v-for="(que,idx) in question_list">
				<text class="stem" v-text="idx+1 + '、' + que.stem"></text>
				<view class="star-box">
					<button type="default" class="star-btn star-green" :class="{'star-active':que.score == 10}" @click="grade(que.qid,10)">优秀</button>
					<button type="default" class="star-btn star-green" :class="{'star-active':que.score == 8}" @click="grade(que.qid,8)">良好</button>
					<button type="default" class="star-btn star-green" :class="{'star-active':que.score == 6}" @click="grade(que.qid,6)">一般</button>
					<button type="default" class="star-btn star-green" :class="{'star-active':que.score == 4}" @click="grade(que.qid,4)">较差</button>
					<button type="default" class="star-btn star-green" :class="{'star-active':que.score == 2}" @click="grade(que.qid,2)">很差</button>
					<!-- <text v-for="(star,sid) in que.star" :key="sid" class="star iconfont icon-xingxing1" :class="{'yellow':star.select}" @click="grade(que.qid,star.id)"></text> -->
				</view>
			</view>
			<view class="btn-box">
				<button type="default" class="test-btn submit" @click="saveAnswer">提交</button>
				<button type="default" class="test-btn giveup" @click="giveUp">放弃</button>
			</view>
		</view>
	</view>
</template>

<script>
	import logic from '../../common/logic.js';
	export default {
		data() {
			return {
				examId:0,
				userId:0,
				staff_list:[],
				question_list:[],
				staffId:0,
				item:{testId:0,staffId:0,staffName:'',examId:0,userId:0,score:0,progress:0,answer:[]},
				display:'list',
				testing:[]
			}
		},
		onLoad(options){
			console.log(options);
			if(options.examId <= 0){
				uni.showToast({
					title:'获取参数失败',
					icon:'none',
					duration:2000,
					success:()=>{
						setTimeout(()=>{
							uni.redirectTo({
								url:'../../pages/index/index'
							});
						});
					}
				})
			}else{
				this.examId = options.examId;
			}
			this.userId = logic.userInfo.userId;
			if(this.userId <= 0){
				uni.showToast({
					title:'获取用户ID失败，请登录后再试',
					icon:'none',
					duration:2000,
					success:()=>{
						setTimeout(()=>{
							uni.redirectTo({
								url:'../../pages/login/login'
							});
						});
					}
				})
			}
			this.getTesting();
		},
		methods: {
			getTesting(){
				let vd = {
					userId:this.userId,
					examId:this.examId
				};
				let that = this;
				console.log(vd);
				uni.showLoading({
					title:'数据传输中，请稍后......'
				});
				uni.request({
					url:String(logic.urls.getTesting),
					data: vd,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success:(res)=>{
						console.log(res);
						let rs = res.data;
						if(rs.status == 1){
							that.question_list = this.resetQuestions(rs.question_list);
							that.staff_list = rs.data;
						}else{
							uni.showToast({
								title:'获取测评数据失败，代码为：' + rs.msg,
								icon:'none',
								duration:3000
							});
						}
					},
					fail:(res)=>{
						console.log(res);
						uni.showToast({
							title:'通讯失败失败，代码为：' + res,
							icon:'none',
							duration:3000
						});
					},
					complete:()=>{
						uni.hideLoading();
					}
				});
			},
			resetItem(){
				this.item = {testId:0,staffId:0,staffName:'',examId:0,userId:0,score:0,progress:0,answers:[]};
			},
			toEdit(el){
				let that = this;
				this.item = el;
				console.log(this.item);
				this.question_list = this.resetQuestions(this.question_list);
				this.setQuestions(el.answers);
				this.display = 'edit';
			},
			saveAnswer(){
				let answers = this.getAnswer();
				let vd = {
					testId:this.item.testId,
					userId:this.item.userId,
					examId:this.item.examId,
					staffId:this.item.staffId,
					staffName:this.item.staffName,
					score:answers.score,
					answers:answers.answers,
					progress:answers.percent
				};
				if(vd.progress != 1){
					uni.showToast({
						title:'测评项目没有全部完成，请完成所有测评项目后再次提交',
						icon:'none',
						duration:3000
					});
					return;
				}
				console.log(vd);
				uni.showLoading({
					title:'正在保存数据，请稍后......'
				});
				uni.request({
					url:String(logic.urls.saveTesting),
					data: vd,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success:(res) => {
						console.log(res);
						let rs = res.data;
						if(rs.status == 1){
							let data = rs.data;
							for(var i=0;i<this.staff_list.length;i++){
								if(data.staffId == this.staff_list[i]['staffId']){
									this.staff_list.splice(i,1,data);
									break;
								}
							}
							this.display = 'list';
						}else{
							uni.showToast({
								title:'获取数据失败，代码为：' + rs.msg,
								icon:'none',
								duration:3000
							});
						}
					},
					fail:(res) => {
						uni.showToast({
							title:'通讯失败，代码为' + res,
							icon:'none',
							duration:3000
						});
					},
					complete:() => {
						uni.hideLoading();
					}
				});
			},
			giveUp(){
				this.resetItem();
				this.display = 'list';
			},
			resetQuestions(que){
				for(var i=0;i<que.length;i++){
					que[i]['score'] = '';
				}
				console.log(que);
				return que;
			},
			setQuestions(arr){
				for(var i=0;i<this.question_list.length;i++){
					for(var k=0;k<arr.length;k++){
						if(arr[k]['qid'] == this.question_list[i]['qid']){
							this.question_list[i]['score'] = Number(arr[k]['score']);
							/* for(var j=0;j<10;j++){
								if(j < arr[k]['score']){
									this.question_list[i]['star'][j] = {id:j+1,select:true};
								}else{
									this.question_list[i]['star'][j] = {id:j+1,select:false};
								}
							} */
						}
					}
				}
				console.log(this.question_list);
			},
			grade(qid,score){
				//根据传入的问题的id和点的点击的星星的id值，设置问题ID值为qid的问题的star数组				
				for(var i=0;i<this.question_list.length;i++){
					if(qid == this.question_list[i]['qid']){
						this.question_list[i]['score'] = score;
						break;
					}
				}
				console.log(this.question_list);
			},
			getAnswer(){
				
				//获取答案情况，包括每个问题的答案，总分数，有多少个问题被回答，以及完成度
				let answers = [];
				let score = 0;
				let count = 0;
				let percent = 0;
				if(this.question_list.length == 0){
					percent = 0;
					return {answers:answers,score:score,count:count,percent:percent};
				}
				for(var i=0;i<this.question_list.length;i++){
					var rs = this.question_list[i]['score'];
					if(rs > 0){
						answers.push({qid:this.question_list[i]['qid'],score:rs});
						score += rs;
						count++;
					}
				}
				percent = Math.floor(count / this.question_list.length);
				let result = {answers:answers,score:score,count:count,percent:percent};
				console.log(result);
				return result;
			},
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100%;
		display:flex;
		justify-content:center;
	}
	.test-box{
		width:96%;
		height:100%;
		display:flex;
		flex-flow: row wrap;
		justify-content: space-between;
		overflow-y: scroll;
	}
	.test-item{
		width:120rpx;
		height:120rpx;
		margin:20rpx;
		border-radius:50%;
		background-color: #CCCCCC;
		color:#666;
		font-size:30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex:0 0 auto;
	}
	.edit-box{
		width:96%;
		height:100%;
		display: flex;
		flex-flow:row wrap;
		justify-content:center;
		padding:20rpx 0;
	}
	.item-box{
		width:90%;
		height:130rpx;
		flex:0 0 auto;
		margin-top:20rpx;
	}
	.stem{
		height: 40rpx;
		font-size:30rpx;
	}
	.star-box{
		width:100%;
		height:60rpx;
		font-size:30rpx;
		margin-top:30rpx;
		color:#dedede;
		display: flex;
		justify-content:space-around;
		align-items: center;
	}
	.star-btn{
		width:150rpx;
		height:60rpx;
		border:1px solid #dedede;
		text-align:center;
		line-height:60rpx;
		font-size:30rpx;
		font-weight: 900;
		color:#fff;
	}
	.star-box .star-red{
		background-color:#A3F4F9;
	}
	.star-box .star-yellow{
		background-color:#FAFB84;
	}
	.star-box .star-green{
		background-color: #10DFAF;
		color:#fff;
	}
	.star-box .star-orange{
		background-color: #F39761;
	}
	.star-box .star-oranged{
		background-color:#E96E27;
	}
	.star-box .star-active{
		background-color:#F83058;
		color:#fff;
	}
	.exit-title{
		height:100rpx;
		font-size:40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color:#007AFF;
		font-weight:900;
	}
	.star{
		cursor: pointer;
	}
	.yellow{
		color:#fbf808;
	}
	.btn-box{
		width:60%;
		height:80rpx;
		margin:40rpx auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.test-btn{
		width:160rpx;
		height:60rpx;
		font-size:30rpx;
		color:#fff;
		text-align:center;
		line-height:60rpx;
	}
	.btn-box .submit{
		background-color: #41C7AF;
	}
	.btn-box .giveup{
		background-color:#C0C0C0;
		color:#DD524D;
	}
	.complete{
		background-color: #54E38E;
	}
</style>
